Horizontal scroll bars in select box

Taras_96

Hi everyone,

I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?

Thanks

Taras

Jul 15 '06 #1

Subscribe Post Reply

61105

Bart Van der Donck

Taras_96 wrote:

I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?

This should do the trick:

<div style="overflow-x:scroll; width:120px;
overflow: -moz-scrollbars-horizontal;">
<select multiple name="mySelect" size="3">
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
</select>
</div>

Hope this helps,

--
Bart

Jul 15 '06 #2

jim

Taras,
Try using the size="2" attribute; it sets the length of viewable
options in your select box.
eg:
-----------------------------------------
<style type="text/css">
#selectbox{
width:120px;
background-color:cyan;
border:0px;
color:navy;
text-align:center;
font-size:11pt;
font-family:garamond;
}
</style>
</head>
<body>
<form name="myform">
<select multiple="true" name="selectbox" id="selectbox" size="2" >
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
<option value="seven">Seven</option>
</style>
</form>
</body>

Jul 18 '06 #3

Taras_96

Hi Bart,

Your suggestion worked pefectly. I tried doing something similar except
to the select element (which didn't work). It works both in IE and FF.
The only problem is that in IE you can't change the select boxe's
border, so if you put a border around the containing div, you get two
borders in IE (which looks kind of bad).

Anyway of getting around this in IE? Possibly without using an outer
div?

Thanks

Taras
Bart Van der Donck wrote:

Taras_96 wrote:

I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?

This should do the trick:

<div style="overflow-x:scroll; width:120px;
overflow: -moz-scrollbars-horizontal;">
<select multiple name="mySelect" size="3">
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
</select>
</div>

Hope this helps,

--
Bart

Jul 21 '06 #4

Similar topics

Scroll bars in !(Quircks mode)

by: Axel Dahmen | last post by:

I'm just transcoding my HTML pages from Quirks to Standard mode. Doing so I noticed that whenever a frame's content overflows its frame, TWO scroll bars appear in Standard mode, a vertical and a...

HTML / CSS

XVT ListBox- Horizontal scroll

by: Programmer | last post by:

Hi! I've just started using the XVT portability kit in my C++ application, which has a lot of dialogs with list boxes. I ran into an issue when I started using the list boxes. The horizontal...

C / C++

iFrame : suppress horizontal scroll bar

by: RJN | last post by:

Hi I'm using an iFrame to enclose another document. The iFrame width is sufficient to hold the enclosed document. When the enclosed document has more data and exceeds the height set for iFrame,...

ASP.NET

Menu Control-expanding child items cause browser scroll bars to ap

by: jojobar | last post by:

We are using the ASP:Menu control (horizontal) for site navigation. The menu is contained by a table with css styles that allows us to give the illusion of a menu bar that runs the entire width of...

ASP.NET

How to define a HTML page not allow scroll bars and resize?

by: RC | last post by:

I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...

Javascript

Subform Scroll Bars Do Not Display

by: David_from_Chicago | last post by:

I am developing an application in Access 2000 (A2K) which has multiple forms and subforms. Until now, all subforms displayed scroll bars properly (according to the subform's property setting). ...

Microsoft Access / VBA

How can I make scroll bars operational?

by: robertko2 | last post by:

For some reason I can't get vertical or horizontal scroll bars to function at all. They show up at run time, but look like their disabled. I need to make sure that anyone with a low screen resolution...

Visual Basic 4 / 5 / 6

Javascript function to enable a disabled horizontal scroll on browser resize

by: eliteflyerteam | last post by:

i was looking for advice on a javascript function - i have horizontal scroll bars disabled using, <body style="overflow-x:hidden;"> but i want to create a function so that when i resize the browser...

Javascript

How to prevent horizontal scroll bars in browser window

by: icancreate | last post by:

Anyone know how I can achieve the following. I want to place an animated banner into my homepage that extends beyond the width of the viewing area in the web browser without the browser displaying a...

Javascript

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General